import React, { useContext, useState, useEffect, useRef } from 'react';
import {
  Form,
  Input,
  Button,
  message,
  Modal,
  Upload,
  Space,
  Tabs,
  InputNumber,
  TreeSelect,
  Table,
  Popconfirm,
  Checkbox,
  Menu,
  Dropdown,
  Select,
  Row,
  Col,
  List,
  Transfer,
} from 'antd';
import {
  DownOutlined,
  ExclamationCircleOutlined,
  LoadingOutlined,
  PlusOutlined,
  RightOutlined,
} from '@ant-design/icons';
import { connect } from 'umi';
import UploadUtil from '@/components/UploadUtil';
import moment from 'moment';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import ChoiceProduct from './ChoiceProduct';
import ChoiceCourse from './ChoiceCourse';
import { FormInstance } from 'antd/lib/form';

const { Option } = Select;
const currControl = 'Edu_Product';
const { confirm } = Modal;
const { TabPane } = Tabs;
const EditableContext = React.createContext<FormInstance<any> | null>(null);
//形参类型
interface Item {
  keys: string;
  isRec: boolean;
  isTop: boolean;
  sortNum: number;
  id: string;
}

interface EditableRowProps {
  index: number;
}

const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};

interface EditableCellProps {
  keys: React.ReactNode;
  title: React.ReactNode;
  editable: boolean;
  children: React.ReactNode;
  dataIndex: keyof Item;
  record: Item;
  handleSave: (record: Item) => void;
  handleDelete: (record: Item) => void;
}

const EditableCell: React.FC<EditableCellProps> = ({
  title,
  editable,
  keys,
  children,
  dataIndex,
  record,
  handleSave,
  handleDelete,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef<Input>(null);
  const form = useContext(EditableContext)!;

  useEffect(() => {
    if (editing) {
      inputRef.current!.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({ [dataIndex]: record[dataIndex] });
  };
  const save = async () => {
    try {
      const values = await form.validateFields();
      if (values.sortNum) {
        record.sortNum = values.sortNum;
      }
      toggleEdit();
      handleSave(record);
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };
  let childNode = children;
  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{ margin: 0 }}
        name={dataIndex}
        rules={[
          {
            required: true,
            message: `请输入${title} .`,
          },
        ]}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
      <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
        {children}
      </div>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};

type EditableTableProps = Parameters<typeof Table>[0];
interface DataType {
  keys: React.Key;
  courseId: string;
  isTop: boolean;
  isRec: boolean;
  sortNum: Number;
  productId: string;
  id: string;
}

type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;

class VaccinesEdit extends React.Component<any, any> {
  columnsProduct: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[];
  constructor(props: any) {
    super(props);
    this.columnsProduct = [
      {
        title: '课程名称',
        dataIndex: 'title',
        width: 230,
        ellipsis: true,
      },
      {
        title: '推荐',
        dataIndex: 'isRec',
        width: 100,
        render: (text: boolean, record: any) => (
          <Checkbox checked={text} onChange={() => this.handleAct(record.id, 'rec')} />
        ),
      },
      {
        title: '置顶',
        dataIndex: 'isTop',
        width: 100,
        render: (text: boolean, record: any) => (
          <Checkbox checked={text} onChange={() => this.handleAct(record.id, 'top')} />
        ),
      },
      {
        title: '排序号',
        dataIndex: 'sortNum',
        width: 120,
        editable: true,
      },
      {
        title: '操作',
        dataIndex: 'actions',
        render: (text: any, record: any) => (
          <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
            <a>删除</a>
          </Popconfirm>
        ),
      },
    ];
    this.state = {
      loading: false,
      loadingP: false,
      datas: {},
      imageUrl: '',
      courseId: [],
      imgList: [],
      cascaderOption: [],
      options: [],
      dataSource: [],
      pageIndex: 1,
      pageSize: 10,
      selectedKeys: [],

      targetKeys: [],
      targetProKeys: [],
      targetCourseKeys: [],
      selectedCouKeys: [],
      selectedProKeys: [],
      selectedCourseKeys: [],
      couponDatas: [],
      promotions: [],
      totalCount: 0,
      visibleProduct: false,
      visibleCourse: false,
      visibleRelation: false,
      selectProduct: [],
      copyData: [],
      parentId: '',
      stateKey: 0,
      categoryId: null,
      titles: '',
      propsCourseId: '',
      courseData: {},
    };
  }
  formRef: any = React.createRef();
  componentDidMount() {
    const { ParentData } = this.props;
    let { record, stateKey, categoryId, title } = ParentData;

    this.fetchCategory();
    this.fetchgory();
    this.fetchCoupon();
    this.fetchPromotion();
    if (record && record.id) {
      this.getData(record.id);
      this.getProCourse(record.id);
      this.getRelations(record.id);
      this.setState({ parentId: record.id, stateKey, categoryId, titles: title });
    }
  }
  getData = (id: number) => {
    const { dispatch } = this.props;
    if (id) {
      dispatch({
        type: 'Abp/get',
        payload: { id },
        control: currControl,
      }).then(() => {
        var result = this.props.response.result;
        if (result) {
          if (result.imageUrl) {
            this.setState({ imageUrl: result.imageUrl });
          }
          if (result.startTime) result.startTime = moment(result.startTime);
          if (result.endTime) result.endTime = moment(result.endTime);
          result.couponId = result.couponId?.split(',');
          result.promotionId = result.promotionId?.split(',');
          result.courseId = result.courseId?.toLowerCase();
          if (result.courseId) {
            this.featchCourse(result.courseId);
          }

          this.setState({
            targetKeys: result.couponId,
            targetProKeys: result.promotionId,
          });

          result.contents = BraftEditor.createEditorState(result.contents);
          this.setState({ copyData: result });
          this.formRef.current.setFieldsValue({ model: result });
        }
      });
    }
  };
  //获取课程list
  featchCourse = (id: any) => {
    if (id) {
      this.props
        .dispatch({
          type: 'Abp/get',
          payload: {
            id,
          },
          control: 'Edu_Course',
        })
        .then(() => {
          var result = this.props.response.result;
          this.setState({ courseData: result });
        });
    }
  };
  //获取活动list
  fetchPromotion = () => {
    this.props
      .dispatch({
        type: 'Abp/getAll',
        payload: { SkipCount: 0, MaxResultCount: 9999 },
        control: 'Edu_Promotion',
      })
      .then(() => {
        var resp = this.props.response;
        if (resp && resp.result) {
          var promotions: any = [];
          resp.result.items.forEach((element: any) => {
            promotions.push({
              key: element.id,
              title: element.title,
              description: element.memo,
            });
          });
          this.setState({ promotions });
        }
      });
  };
  //获取优惠券list
  fetchCoupon = () => {
    this.props
      .dispatch({
        type: 'Abp/getAll',
        payload: { SkipCount: 0, MaxResultCount: 9999 },
        control: 'Coupon',
      })
      .then(() => {
        var resp = this.props.response;
        if (resp && resp.result) {
          var couponDatas: any = [];
          resp.result.items.forEach((element: any) => {
            couponDatas.push({
              key: element.id,
              title: element.title,
              description: element.memo,
            });
          });
          this.setState({ couponDatas });
        }
      });
  };
  //查询关联销售
  getRelations = (id: number) => {
    if (id) {
      this.props
        .dispatch({
          type: 'Abp/getRelation',
          payload: { id },
        })
        .then(() => {
          const res = this.props.response.result;
          if (res && res.length > 0) {
            this.setState({ selectProduct: res });
          }
        });
    }
  };
  fetchCategory = () => {
    this.props
      .dispatch({
        type: 'Category/getTreeData',
        payload: { layout: 'product' },
      })
      .then(() => {
        this.setState({ cascaderOption: this.props.Category.response.result });
      });
  };
  fetchgory = () => {
    this.props
      .dispatch({
        type: 'Category/getTreeData',
        payload: { layout: 'course' },
      })
      .then(() => {
        this.setState({ options: this.props.Category.response.result });
      });
  };
  getProCourse = (id: any) => {
    const { pageIndex, pageSize } = this.state;
    if (id) {
      this.props
        .dispatch({
          type: 'Abp/getById',
          payload: {
            SkipCount: (pageIndex - 1) * pageSize,
            MaxResultCount: pageSize,
            productId: id,
            sortmode: 'asc',
          },
        })
        .then(() => {
          var resp = this.props.response;
          if (resp && resp.result) {
            this.setState({
              dataSource: resp.result.items,
              loadingP: false,
              totalCount: resp.result.totalCount,
            });
          }
        });
    }
  };
  onFinish = async (values: any) => {
    const { selectProduct, propsCourseId } = this.state;

    var act = 'Abp/create';
    if (values.model.id) {
      act = 'Abp/update';
    }
    if (this.state.imageUrl) {
      values.model.imageUrl = this.state.imageUrl;
    }
    var ids: any = [];
    if (selectProduct.length > 0) {
      selectProduct.forEach((item: any) => {
        ids.push(item.id);
      });
      values.model.relationId = ids.join(',');
    } else {
      values.model.relationId = '';
    }
    if (propsCourseId) {
      values.model.courseId = propsCourseId;
    }

    values.model.contents = values.model.contents?.toHTML();

    values.model.couponId = values.model.couponId?.join(',');
    values.model.promotionId = values.model.promotionId?.join(',');
    this.props
      .dispatch({
        type: act,
        payload: values.model,
        control: currControl,
      })
      .then(() => {
        var resp = this.props.response;
        if (resp.success) {
          message.success('保存成功！');
          this.props.fetchDatas(0);
        } else {
          message.error('保存错误，请联系管理员');
        }
      });
  };
  ResetForm = () => {
    var data = {
      id: 0,
    };
    this.setState({ datas: data });
    this.formRef.current.resetFields();
  };
  handleDel = () => {
    const { parentId } = this.state;
    this.props
      .dispatch({
        type: 'Abp/batchDelete',
        payload: { id: parentId },
      })
      .then(() => {
        var resp = this.props.response;
        if (resp.success) {
          message.success('删除成功！');
          this.props.fetchDatas(0);

          this.formRef.current.resetFields();
        } else {
          message.error('删除错误，请联系管理员！');
        }
      });
  };
  showConfirm = () => {
    var _this = this;
    confirm({
      title: '警告',
      icon: <ExclamationCircleOutlined />,
      content: '删除后将不可恢复，确定删除？',
      onOk() {
        _this.handleDel();
      },
      onCancel() {},
    });
  };
  handleChange = (editorState: any) => {
    this.setState({
      contentEditor: editorState.toHTML(),
    });
  };
  onChange = (value: number[]) => {
    this.setState({
      inputValue: value,
    });
  };
  handleUpload = (info: any) => {
    if (info.file.status === 'done' && info.file.response) {
      this.setState({
        imageUrl: info.file.response.result,
      });
    }
  };

  onSelectChangeP = (selectedKeys: any, values: any) => {
    this.setState({ selectedKeys });
  };

  //删除关联产品课程
  handleDelete = (id: number) => {
    this.props
      .dispatch({
        type: 'Abp/delete',
        payload: { id },
        control: 'Edu_ProductCourse',
      })
      .then(() => {
        this.getProCourse(this.props.ParentData.record.id);
        this.setState({ loadingP: false });
      });
  };
  //操作产品课程
  handleAct = (id: any, act: string) => {
    this.props
      .dispatch({
        type: 'Abp/batchAll',
        payload: { ids: [id], act },
        control: 'Edu_ProductCourse',
      })
      .then(() => {
        var resp = this.props.response;
        if (resp && resp.success) {
          message.info('执行成功！');
          this.getProCourse(this.props.ParentData.id);
        }
      });
  };
  //批量产品课程操作
  handleAction = (act: string) => {
    const { selectedKeys } = this.state;
    if (selectedKeys.length <= 0) {
      message.warning('请至少选择一项！');
      return;
    }
    this.props
      .dispatch({
        type: 'Abp/batchAll',
        payload: { ids: selectedKeys, act },
        control: 'Edu_ProductCourse',
      })
      .then(() => {
        var resp = this.props.response;
        if (resp && resp.success) {
          message.info('执行成功！');
          this.getProCourse(this.props.ParentData.id);
        }
      });
  };

  handleMenuClick = (e: any) => {
    this.handleAction(e.key);
  };
  //排序
  handleSave = (row: DataType) => {
    let newData: DataType[] = [];
    const { dataSource } = this.state;

    dataSource.forEach((element: DataType) => {
      if (element.id === row.id) {
        element.isTop = row.isTop;
        element.isRec = row.isRec;
        element.sortNum = row.sortNum;
        element.productId = row.productId;
        element.courseId = row.courseId;
        newData.push(element);
      }
    });
    const { dispatch } = this.props;
    dispatch({
      type: 'Abp/update',
      payload: { ...newData[0] },
      control: 'Edu_ProductCourse',
    }).then(() => {
      this.getProCourse(this.props.ParentData.id);
    });
  };

  //选择关联销售产品
  clickFun = (val: any) => {
    const { selectProduct } = this.state;
    let temp = [...selectProduct, ...val];
    this.setState({ selectProduct: temp });
  };
  //取消关联销售产品
  handleRemove = (val: any) => {
    let { selectProduct } = this.state;
    selectProduct = selectProduct.filter(function (item: any) {
      return item.id !== val.id;
    });
    this.setState({ selectProduct: selectProduct });
  };
  //优惠券选择
  handleTransChange = (nextTargetKeys: any, direction: any, moveKeys: any) => {
    this.setState({ targetKeys: nextTargetKeys });
  };

  handleSelectChange = (sourceSelectedKeys: any, targetSelectedKeys: any) => {
    this.setState({
      selectedCouKeys: [...sourceSelectedKeys, ...targetSelectedKeys],
    });
  };
  //课程选择
  handleCourseTransChange = (nextTargetKeys: any, direction: any, moveKeys: any) => {
    this.setState({ targetCourseKeys: nextTargetKeys });
  };

  handleCourseSelectChange = (sourceSelectedKeys: any, targetSelectedKeys: any) => {
    this.setState({
      selectedCourseKeys: [...sourceSelectedKeys, ...targetSelectedKeys],
    });
  };
  //产品选择
  handleProTransChange = (nextProTargetKeys: any, direction: any, moveKeys: any) => {
    this.setState({ targetProKeys: nextProTargetKeys });
  };

  handleProSelectChange = (sourceProSelectedKeys: any, targetProSelectedKeys: any) => {
    this.setState({
      selectedProKeys: [...sourceProSelectedKeys, ...targetProSelectedKeys],
    });
  };
  handleCopy = () => {
    const { copyData } = this.state;
    let {
      creationTime,
      couponDtos,
      contents,
      couponId,
      edu_PromotionDtos,
      id,
      ium,
      promotionId,
      title,
      ...props
    } = copyData;
    title = `${title}复制`;
    couponId = couponId?.join(',');
    promotionId = promotionId?.join(',');
    contents = contents?.toHTML();
    this.props
      .dispatch({
        type: 'Abp/create',
        payload: {
          title,
          couponId,
          promotionId,
          contents,
          ...props,
        },
        control: currControl,
      })
      .then(async () => {
        var resp = this.props.response;
        let { dataSource } = this.state;
        let params: any = [];
        if (dataSource.length > 0) {
          dataSource.forEach((item: any) => {
            var obj = {
              title: item.title,
              isTop: item.isTop,
              isRec: item.isRec,
              sortNum: item.sortNum,
              //productId给此产品添加课程
              //relationId课程id
              productId: resp.result.id,
              relationId: item.relationId,
            };

            params.push(obj);
          });
        }

        if (resp.success) {
          await this.props
            .dispatch({
              type: 'Abp/createCourse',
              payload: params,
            })
            .then(() => {
              // const resps = this.props.response;
            });
          message.success('复制成功！');
          this.props.fetchDatas(0);
        } else {
          message.error('保存错误，请联系管理员');
        }
      });
  };
  //添加课程，
  getCourse = (val: any) => {
    this.setState({ propsCourseId: val.id, courseData: val });
  };
  render() {
    const {
      datas,
      totalCount,
      dataSource,
      pageSize,
      loading,
      loadingP,
      imageUrl,
      selectedKeys,
      visibleProduct,
      visibleCourse,
      visibleRelation,
      selectProduct,
      couponDatas,
      promotions,

      targetKeys,
      selectedCouKeys,
      targetProKeys,
      selectedProKeys,
      parentId,
      courseData,
    } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div className="ant-upload-text">上传图片</div>
      </div>
    );
    const rowSelectionP = {
      selectedKeys,
      onChange: this.onSelectChangeP,
    };
    const productId = this.props.ParentData.record ? this.props.ParentData.record.id : '';
    console.log(this.props);

    const columns = this.columnsProduct.map((col) => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: (record: DataType) => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave,
          handleDelete: this.handleDelete,
        }),
      };
    });
    const components = {
      body: {
        row: EditableRow,
        cell: EditableCell,
      },
    };

    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="top" icon={<RightOutlined />}>
          置顶
        </Menu.Item>
        <Menu.Item key="rec" icon={<RightOutlined />}>
          推荐
        </Menu.Item>
      </Menu>
    );
    return (
      <div>
        <Form ref={this.formRef} layout="vertical" onFinish={this.onFinish}>
          <Tabs defaultActiveKey="1">
            <TabPane tab="基本" key="1">
              <div style={{ display: 'none' }}>
                <Form.Item label="id" name={['model', 'id']}>
                  <Input />
                </Form.Item>
                <Form.Item label="id" name={['model', 'imageUrl']}>
                  <Input />
                </Form.Item>
                <Form.Item name={['model', 'courseId']} label="课程">
                  <Input readOnly />
                </Form.Item>
              </div>
              <Row gutter={4}>
                <Col span={8}>
                  <Form.Item
                    name={['model', 'categoryId']}
                    label="产品分类"
                    rules={[{ required: true }]}
                  >
                    <TreeSelect
                      allowClear
                      value={this.state.value}
                      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                      treeData={this.state.cascaderOption}
                      placeholder="请选择"
                      treeDefaultExpandAll
                    />
                  </Form.Item>
                </Col>
                <Col span={16}>
                  <Form.Item
                    name={['model', 'title']}
                    label="产品名称"
                    rules={[{ required: true }]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Form.Item name={['model', 'summary']} label="产品简介" rules={[{ required: true }]}>
                <Input.TextArea />
              </Form.Item>

              <Row gutter={4}>
                <Col span={4}>
                  <Form.Item name={['model', 'price']} label="单价" rules={[{ required: true }]}>
                    <InputNumber style={{ width: 140 }} min={0} step={0.1} />
                  </Form.Item>
                </Col>
                <Col span={4}>
                  <Form.Item name={['model', 'quantity']} label="数量" rules={[{ required: true }]}>
                    <InputNumber style={{ width: 140 }} />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    name={['model', 'prdType']}
                    label="产品类型"
                    rules={[{ required: true }]}
                  >
                    <Select>
                      <Option value="系列产品">系列产品</Option>
                      <Option value="单品">单品</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item
                    name={['model', 'sortNum']}
                    label="排序号"
                    tooltip="请按升序填写排序号"
                  >
                    <InputNumber style={{ width: '100%' }} />
                  </Form.Item>
                </Col>
              </Row>
              <Form.Item>
                <Button
                  type="primary"
                  icon={<PlusOutlined />}
                  onClick={() => this.setState({ visibleCourse: true })}
                  style={{ marginBottom: 12 }}
                >
                  添加产品课程
                </Button>
                <div
                  style={{
                    width: 400,
                    height: 40,
                    background: '#eee',
                    lineHeight: '40px',
                    fontSize: '16px',
                    paddingLeft: '12px',
                  }}
                >
                  <span>课程名称：</span>
                  <span>{courseData.title}</span>
                </div>
              </Form.Item>

              <Row style={{ marginTop: '20px' }}>
                <Col>
                  <Form.Item>
                    <Upload
                      action={UploadUtil.actionURL}
                      headers={{
                        Authorization: UploadUtil.accessToken,
                      }}
                      data={{
                        objectId: datas.id,
                        objectName: currControl,
                        objectField: 'imageUrl',
                      }}
                      name="files"
                      listType="picture-card"
                      className="avatar-uploader"
                      showUploadList={false}
                      beforeUpload={UploadUtil.beforeUpload}
                      onChange={this.handleUpload}
                    >
                      {imageUrl ? (
                        <img
                          src={UploadUtil.imgServ + imageUrl}
                          style={{ width: '100%', height: '100%' }}
                        />
                      ) : (
                        uploadButton
                      )}
                    </Upload>
                  </Form.Item>
                </Col>
              </Row>
            </TabPane>
            <TabPane tab="关联销售" key="2">
              <Form.Item name={['model', 'relationId']}>
                <Space>
                  <Button
                    type="primary"
                    icon={<PlusOutlined />}
                    onClick={() => this.setState({ visibleRelation: true })}
                  >
                    关联销售
                  </Button>
                </Space>
                <Row style={{ marginTop: 20 }}>
                  <Col span={16}>
                    <List
                      itemLayout="horizontal"
                      dataSource={selectProduct}
                      renderItem={(item: any) => (
                        <List.Item
                          style={{
                            background: '#f5f7fa',
                            marginBottom: '1px',
                            paddingLeft: '14px',
                          }}
                          actions={[
                            <Button onClick={() => this.handleRemove(item)}>取消关联</Button>,
                          ]}
                        >
                          <List.Item.Meta title={`${item.title}`} />
                        </List.Item>
                      )}
                    />
                  </Col>
                </Row>
              </Form.Item>
            </TabPane>
            <TabPane tab="内容" key="3">
              <Form.Item name={['model', 'contents']} label="产品内容">
                <BraftEditor
                  onChange={this.handleChange}
                  style={{ width: '724px', border: '1px dotted #ccc' }}
                />
              </Form.Item>
            </TabPane>
            <TabPane tab="系列打包产品" key="4">
              <Space style={{ marginBottom: 5 }}>
                <Button
                  type="primary"
                  icon={<PlusOutlined />}
                  onClick={() => this.setState({ visibleProduct: true })}
                  style={{ marginBottom: 12 }}
                  disabled={!parentId}
                >
                  添加系列打包产品
                </Button>
                <Dropdown overlay={menu}>
                  <Button style={{ marginBottom: 12 }}>
                    操作 <DownOutlined />
                  </Button>
                </Dropdown>
              </Space>

              <Table
                rowKey="id"
                loading={loadingP}
                components={components}
                columns={columns as ColumnTypes}
                scroll={{ y: 500 }}
                rowSelection={rowSelectionP}
                dataSource={dataSource}
                pagination={{
                  onChange: (page, pageSize) => {
                    this.setState({ pageIndex: page, pageSize }, () => {
                      this.getProCourse(productId);
                    });
                  },

                  pageSize,
                  pageSizeOptions: ['10', '50', '100', '5000'],
                  total: totalCount,
                }}
              />
            </TabPane>
            <TabPane tab="优惠券" key="5">
              <Form.Item name={['model', 'couponId']}>
                <Transfer
                  dataSource={couponDatas}
                  titles={['所有优惠券', '已选优惠券']}
                  targetKeys={targetKeys}
                  selectedKeys={selectedCouKeys}
                  onChange={this.handleTransChange}
                  onSelectChange={this.handleSelectChange}
                  render={(item: any) => item.title}
                  style={{ marginBottom: 16, width: '700px' }}
                  pagination
                />
              </Form.Item>
            </TabPane>
            <TabPane tab="促销活动" key="6">
              <Form.Item name={['model', 'promotionId']}>
                <Transfer
                  dataSource={promotions}
                  titles={['所有活动', '已选活动']}
                  targetKeys={targetProKeys}
                  selectedKeys={selectedProKeys}
                  onChange={this.handleProTransChange}
                  onSelectChange={this.handleProSelectChange}
                  render={(item: any) => item.title}
                  style={{ marginBottom: 16 }}
                />
              </Form.Item>
            </TabPane>
          </Tabs>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" loading={loading}>
                确定
              </Button>
              <Button type="primary" onClick={this.handleCopy} loading={loading}>
                复制
              </Button>
              <Button onClick={this.ResetForm}>重设</Button>
              <Button danger onClick={this.showConfirm} disabled={!parentId}>
                删除
              </Button>
            </Space>
          </Form.Item>
        </Form>
        <Modal
          title="选择课程"
          visible={visibleCourse}
          destroyOnClose={true}
          onCancel={() => this.setState({ visibleCourse: false })}
          width={900}
          footer={false}
        >
          <ChoiceCourse getCourse={this.getCourse} />
        </Modal>
        <Modal
          title="选择产品"
          visible={visibleProduct}
          destroyOnClose={true}
          onCancel={() => this.setState({ visibleProduct: false })}
          width={900}
          footer={false}
        >
          <ChoiceProduct id={productId} editStatus={'product'} getExpandList={this.getProCourse} />
        </Modal>
        <Modal
          title="选择产品"
          visible={visibleRelation}
          destroyOnClose={true}
          onCancel={() => this.setState({ visibleRelation: false })}
          width={900}
          footer={false}
        >
          <ChoiceProduct
            id={productId}
            editStatus={'relation'}
            getExpandList={this.getProCourse}
            clickFun={(val: any) => this.clickFun(val)}
          />
        </Modal>
      </div>
    );
  }
}
export default connect(({ Abp, Category }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
  Category,
}))(VaccinesEdit);
